<template>
	<div>
		<div class="pl-6 pr-6 pt-6">
			<el-card class="!border-none p-4" shadow="never">
				<div class="topTitle font-bold main-color text-2xl mb-5">
					基础信息
				</div>
				<div class="main-color">
					<el-row class="mt-[30px]">
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">订单编号：</span>123456
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">订单状态：</span>生产中
							</div>
						</el-col>
					</el-row>
					<el-row class="mt-[20px]">
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">快递方式：</span>货代
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">定金支付日期：</span>2023-05-23 14:00:12
							</div>
						</el-col>
					</el-row>
					<el-row class="mt-[20px]">
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">折扣：</span>3%
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">成交条款及运费：</span>500
							</div>
						</el-col>
					</el-row>
					<el-row class="mt-[20px]">
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">付款条件(公司)：</span>30%
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">付款条件(客户)：</span>$180
							</div>
						</el-col>
					</el-row>
					<el-row class="mt-[20px]">
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">完工天数：</span>100天
							</div>
						</el-col>
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">预计完工日期：</span>2023-05-23
							</div>
						</el-col>
					</el-row>
					<el-row class="mt-[20px]">
						<el-col :span="6">
							<div>
								<span class="w-[120px] inline-block text-right mr-[10px]">剩余交期：</span>100天
							</div>
						</el-col>
					</el-row>
				</div>
			</el-card>	
			<el-card class="!border-none p-4 mt-[30px]" shadow="never">
				<div class="topTitle font-bold main-color text-2xl mb-5">
					产品信息
				</div>
				<el-table class="mt-[20px] border-inherit" size="large" :data="pager.lists" v-loading="pager.loading"
				:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
				:cell-style="{'color':'#0054A6','padding':'20px 0'}"
				>
					<el-table-column label="产品图片" prop="scene_name" align="center">
						<template #default="{ row }">
							<el-image class="rounded w-[48px] h-[48px] ml-[10px]"
							src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill" />
						</template>	
					</el-table-column>
					<el-table-column label="产品名称" prop="type_desc" align="center" />
					<el-table-column label="库存" prop="scene_name" align="center" />
					<el-table-column label="需求数量" prop="scene_name" align="center" />
					<el-table-column label="成交价" prop="scene_name" align="center">
						<template #default="{ row }">
							1
						</template>	
					</el-table-column>
					<el-table-column label="操作" prop="scene_name" align="center">
						<template #default="{ row }">
							<el-button
							type="primary" 
							link
							>
								<router-link
								    :to="{
										path: getRoutePath('enquiry.enquiry/viewPrice'),
								        query: {
								            id: 1
								        }
								    }"
								>
									<span class="main-color1">查看报价</span>
								</router-link>
							</el-button>
						</template>	
					</el-table-column>
				</el-table>
				
				<div class="mt-[40px]">
					<el-table class="mt-[20px]" size="large" :data="pager.lists" v-loading="pager.loading"
					:header-cell-style="{'background':'#0054A6','color':'#fff','line-height':'52px','padding':'14px 0'}"
					:cell-style="{'color':'#0054A6','padding':'20px 0'}"
					>
						<el-table-column label="总重量" prop="type_desc" align="center" />
						<el-table-column label="总金额" prop="scene_name" align="center" />
						<el-table-column label="总托数" prop="scene_name" align="center" />
						<el-table-column label="预估总体积(方)" prop="scene_name" align="center">
							<template #default="{ row }">
								1
							</template>	
						</el-table-column>
					</el-table>
				</div>
			</el-card>
		</div>	
	</div>
</template>

<script lang="ts" setup>
	import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
	import { getRoutePath } from '@/router'
	import { noticeLists } from '@/api/message'
	import { usePaging } from '@/hooks/usePaging'
	
	// 列表数据
	
	const { pager, getLists } = usePaging({
	    fetchFun: noticeLists,
	})
	const handleDelete = async (id: number) => {
	    await feedback.confirm('确定要删除？')
	    // await menuDelete({ id })
	    getLists()
	}
	onActivated(() => {
	    getLists()
	})
	
	getLists()
</script>

<style lang="scss" scoped>
	.el-set-form:deep() .el-form-item__label{
		color: var(--el-text-color-main);
		height: 36px;
		line-height: 36px;
	}
	.el-set-form:deep() .el-input__inner{
		height: 36px;
	}
	.el-set-form:deep() .el-input__inner::placeholder {
		color: var(--el-text-color-main);
	}
</style>